<template>
  <div class="m_wrap">
    <div class="m_introduce"
    v-if="userList.length > 0 " 
    v-for="(item,index) in userList" 
    :key="index"
    >
      <img :src="item.topicImg" class="shangpin" alt>
      <div class="tips">
        <span class="tip left"><img :src="item.userImg" alt><span>{{item.userName}}</span></span>
        <span class="tip right"><img src="../assets/img/collect.png"><span>{{item.collectNum}}</span></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name:"Topic",
    data(){
        return{
          userList:[]
        }
    },
    mounted() {
    this.$axios.get("http://localhost:3000/api/userInfo",{
      
    })
    .then(res => {
      this.userList = res.data[0].bloggerArticles
      
    })
    .catch(error => {
      console.log(error);
    })
  },
  
}
</script>
<style scoped  lang="less">
  .m_wrap{
    margin: 40px 10px;
    position: relative;
    top: -27px;
    z-index: 999;
    .m_introduce{
      float: left;
      width: 100%;
      background-color: white;  
      border-radius: 0.5em;
      // margin-bottom: 10px;
      
      .shangpin {
        // margin: 3% 3% 0 3%;
        width:100%;
        height:100%;
        border-radius: 0.5em;
        box-shadow: 0 0 10px 3px rgb(187, 179, 179);
      }
      .tips {
        font-size: 14px;
        color: #ABABAB;
        margin:10px 0;
        float: left;
        width: 100%;
        .tip {
          margin:0 5px;
        }
        .left {
          float: left;
          img {
            width:25px;
            height: 25px;
            border-radius: 0.5em;
            margin-right: 10px;
          }
        }
        .right {
          float: right;
          line-height: 25px;
          img {
             width: 15px;
             height:15px;
             margin-right: 5px;
          }
        }
        .line {
        display:inline-block;
        width:1px;
        height:10px;
        background-color: gray;
        margin:0 5px;
        }
      }
    }
  }

</style>

